<template>
    <div class="userinfo">
        <nav-bar :userImg = "model.user_img"></nav-bar>
        <img src="../assets/bannerTop.jpg" alt="" class="banner">
        <div>
            <user-detail :userInfo="model"></user-detail>
        </div>
        <user-article></user-article>
    </div>
</template>
<script>
import NavBar from "../components/common/NavBar.vue"
import userDetail from "../components/userComponents/userDetail.vue"
import userArticle from "../components/userComponents/userArticle.vue"
export default {
    components:{
        NavBar,
        userDetail,
        userArticle,
    },
    data(){
        return{
            model:{}
        }
    },
    methods:{
        async UserinfoData(){
            if (localStorage.getItem("token")) {
                const res = await this.$http.get("/user/" + localStorage.getItem("id"));
                this.model = res.data[0];
            }
        }
    },
    created(){
        this.UserinfoData()
    }
}
</script>
<style lang="scss">
.userinfo{
    .banner{
        height: 101px;
        width: 100%;
    }
}
</style>